<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			.main{
				border-collapse: collapse;
				border: 1px solid black;
			}
			tr,th,td{
				border: 1px solid black;
			}
			#btn2{
				width: 120px;
				margin: 5px 20px;
			
			}
			.changeform{
				position: absolute;
				top: 70px;
				left: 80px;
				border: 1px solid #808080;
				background-color: azure;
				width: 160px;
				padding: 20px;
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- 输入框 -->
		<input type="text" name="account" id="account" placeholder="请输入账号" />
		<input type="text" name="passward" id="passward" placeholder="请输入密码" />
		<input type="text" name="phone" id="phone" placeholder="请输入手机号" />
		<button type="button" id="btn">新增</button>
		<br>
		<br>
	<form class="changeform">
		<input type="text" name="account2" id="account2" placeholder="请输入账号" /><br/>
		<input type="text" name="passward2" id="passward2" placeholder="请输入密码" /><br/>
		<input type="text" name="phone2" id="phone2" placeholder="请输入手机号" /><br/>
		<button type="button" id="btn2">确认</button>
		
	</form>
		<!-- 建个表格 -->
		<table class="main">
			<tr>
				<th>账号</th>
				<th>密码</th>
				<th>手机号</th>
				<th>操作</th>
			</tr>
			<tbody id="table-content"></tbody>
		</table>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		//定义一个数组将数据放入表格
		//循环
			
			var user_date=[
				{
					account:"00001",
					passward:"123456",
					phone:"23132"
				},
				{
					account:"00002",
					passward:"123456",
					phone:"23132"
				},
				{
					account:"00003",
					passward:"123456",
					phone:"23132"
				},
			]
			//获取表格内容部分table-content
			for(i=0;i<user_date.length;i++){
				
			 document.getElementById("table-content").innerHTML+=
			 "<tr>"
			+"<td>"+user_date[i].account+"</td>"+"<td>"+user_date[i].passward+"</td>"+"<td>"
			+user_date[i].phone+"</td>"+"<td><input type='button'  value='删除' class='del'/><input type='button'  value='编辑' class='change'/></td>"
			+"</tr>";
			//组合标签
			}
			//用户新增
			//1.新增按钮点击事件
			//2.获取输入框的值
			//3.获取后赋值到表格
			$(function(){
				$("#btn").click(function(){  //获取到input的值
					var a=$("#account").val()
					var b=$("#passward").val()
					var c=$("#phone").val()
					document.getElementById("table-content").innerHTML+=
					 "<tr>"
					+"<td>"+a+"</td>"+"<td>"+b+"</td>"+"<td>"
					+c+"</td>"+"<td><input type='button'  value='删除' class='del'/><input type='button'  value='编辑' class='change'/></td>"
					+"</tr>";
				})
				//删除数据
				//1.点击事件
				//2.将选中的数据进行删除
				
				$(document).on("click",".del",function(){//未来事件
				// $(".del").click(function(){
					console.log("2")
					this.parentNode.parentNode.remove();
				})
				//编辑
				//1.点击事件
				//2.建一个表单
				$(".change").click(function(){
					console.log("0")
					$(".changeform").css({
						"display":"block"
					});
					
				});
				$("#btn2").click(function(){
					$("this")
					console.log("000")
					$(".changeform").css({
					"display":"none"
					});
				})
			})
		
		</script>
	</body>
</html>
